<!DOCTYPE html>
<html lang="en">
<head>
<#include "../static/top.ftl" >
    <link rel="stylesheet" href="../../res/libs/misc/datatables/datatables.min.css">
    <link rel="stylesheet" href="../../res/assets/css/bootstrap-table.css">
    <link rel="stylesheet" href="/res/assets/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="/res/libs/bower/chosen/chosen.min.css">
    <link rel="stylesheet" href="/res/assets/css/bootstrap-select.css">
    <link rel="stylesheet" href="/res/assets/css/jquery.webui-popover.min.css">

    <style type="text/css">
        table.dataTable thead .sorting:after {
            opacity: 0.2;
            content: "\f0dc";
        / / padding-right: 50 px;
            font-family: FontAwesome;
            /* sort */
        }

        table.dataTable thead .sorting_asc:after {
            content: "\f0de";
            color: #337ab7;
        / / padding-right: 50 px;
            font-family: FontAwesome;
            /* sort-by-attributes */
        }

        table.dataTable thead .sorting_desc:after {
            content: "\f0dd";
            color: #337ab7;
        / / padding-right: 50 px;
            font-family: FontAwesome;
            /* sort-by-attributes-alt */

        }
        /* 复合增长率 表格样式*/
        .countries-widget .list-group-item {
            margin-bottom: 7px;
            padding: 15px;
        }

        /*显示图片摘要*/
        .product-caption2 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(99, 94, 86,0.7);
            padding: 5px 5px;
            font-weight: 600;
            color: #fff;
            display: block;
        }

    </style>
</head>

<body class="menubar-left menubar-unfold menubar-light theme-primary">
<!--============= start main area -->

<!-- APP NAVBAR ==========-->



<#include "../static/header.ftl" >

<!--========== END app navbar -->

<!-- APP ASIDE ==========-->


<#include "../static/menu.ftl" >

<!--========== END app aside -->

<!-- navbar search -->

<!-- APP MAIN ==========-->
<main id="app-main" class="app-main">
    <div class="wrap">
        <section class="app-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label>起始月份</label>
                                        <div class="input-group date datepicker" data-provide="datepicker" id="start_picker">
                                            <input type="text" class="form-control" placeholder="时间" id="start_month">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>终止月份</label>
                                        <div class="input-group date datepicker" data-provide="datepicker" id="end_picker">
                                            <input type="text" class="form-control" placeholder="时间" id="end_month">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>城市</label>
                                        <select class="form-control" id="city_name">
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <button type="button" class="btn rounded btn-default" id="search"
                                                style="background-color: #ba1b20;color: white;border-color: #ba1b20">确认
                                        </button>
                                    </div>
                                </form>
                            </h4>
                        </header>
                    </div>
                </div>
            </div>
        <#----------------------------------数据概览------------------------------------------->
            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="panel panel-success panel-custom"
                         style="border-bottom-color:  #ba1b20;border-top-color: #ba1b20;">
                        <div class="panel-body" id="over_view_div">
                            <div class="col-md-4 col-sm-6">
                                <div class="widget stats-widget">
                                    <header class="widget-header">
                                        <h4 class="widget-title">外卖餐厅数量</h4>
                                    </header><!-- .widget-header -->
                                    <hr class="widget-separator">
                                    <div style="padding-bottom:10px;">
                                        <table data-plugin="DataTable" class="table table-hover table_overview" style="font-size: 16px"
                                               cellspacing="0" width="100%">
                                            <thead>
                                            <tr>
                                                <th></th>
                                                <th>环比增长</th>
                                                <th>同比增长</th>
                                                <th>城市排名</th>
                                            </tr>
                                            </thead>
                                            <tbody id="body_shop_view">
                                                <tr style="height:10px"><td style="border-style:none;color:#ba1b20"><strong>总体</strong></td></tr>
                                                <tr><td style="border-style:none;" id="total_shop">-</td>
                                                    <td align="right" style="border-style:none;" id="overview_store_mom">-</td>
                                                    <td align="right" style="border-style:none;" id="overview_store_yoy">-</td>
                                                    <td align="center" style="border-style:none;" id="overview_shop_rank">-</td>
                                                </tr>
                                                <tr><td style="border-style:none;color:#ba1b20"><strong>WQSR</strong></td></tr>
                                                <tr><td style="border-style:none;" id="west_shop">-</td>
                                                    <td align="right" style="border-style:none;" id="west_store_mom">-</td>
                                                    <td align="right" style="border-style:none;" id="west_store_yoy">-</td>
                                                    <td align="center" style="border-style:none;" id="west_shop_rank">-</td>
                                                </tr>
                                                <tr><td style="border-style:none;color:#ba1b20"><strong>Pizza&Pasta</strong></td></tr>
                                                <tr><td style="border-style:none;" id="pizza_shop">-</td>
                                                    <td align="right" style="border-style:none;" id="pizza_store_mom">-</td>
                                                    <td align="right" style="border-style:none;" id="pizza_store_yoy">-</td>
                                                    <td align="center" style="border-style:none;" id="pizza_shop_rank">-</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                                <#--end1-->
                            <div class="col-md-4 col-sm-6">
                                <div class="widget stats-widget">
                                    <header class="widget-header">
                                        <h4 class="widget-title">外卖销售额</h4>
                                    </header><!-- .widget-header -->
                                    <hr class="widget-separator">
                                    <div style="padding-bottom:10px;">
                                        <table data-plugin="DataTable" class="table table-hover table_overview" style="font-size: 16px"
                                               cellspacing="0" width="100%">
                                            <thead>
                                            <tr>
                                                <th></th>
                                                <th>环比增长</th>
                                                <th>同比增长</th>
                                                <th>城市排名</th>
                                            </tr>
                                            </thead>
                                            <tbody id="body_shop_view">
                                            <tr style="height:10px"><td style="border-style:none;color:#ba1b20"><strong>总体</strong></td></tr>
                                            <tr><td style="border-style:none;" id="total_sales">-</td>
                                                <td align="right" style="border-style:none;" id="overview_sales_mom">-</td>
                                                <td align="right" style="border-style:none;" id="overview_sales_yoy">-</td>
                                                <td align="center" style="border-style:none;" id="overview_sales_rank">-</td>
                                            </tr>
                                            <tr><td style="border-style:none;color:#ba1b20"><strong>WQSR</strong></td></tr>
                                            <tr><td style="border-style:none;" id="west_sales">-</td>
                                                <td align="right" style="border-style:none;" id="west_sales_mom">-</td>
                                                <td align="right" style="border-style:none;" id="west_sales_yoy">-</td>
                                                <td align="center" style="border-style:none;" id="west_sales_rank">-</td>
                                            </tr>
                                            <tr><td style="border-style:none;color:#ba1b20"><strong>Pizza&Pasta</strong></td></tr>
                                            <tr><td style="border-style:none;" id="pizza_sales">-</td>
                                                <td align="right" style="border-style:none;" id="pizza_sales_mom">-</td>
                                                <td align="right" style="border-style:none;" id="pizza_sales_yoy">-</td>
                                                <td align="center" style="border-style:none;" id="pizza_sales_rank">-</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <#--end2-->
                            <div class="col-md-4 col-sm-6">
                                <div class="widget stats-widget">
                                    <header class="widget-header">
                                        <h4 class="widget-title">外卖客单数</h4>
                                    </header><!-- .widget-header -->
                                    <hr class="widget-separator">
                                    <div style="padding-bottom:10px;">
                                        <table data-plugin="DataTable" class="table table-hover table_overview" style="font-size: 16px"
                                               cellspacing="0" width="100%">
                                            <thead>
                                            <tr>
                                                <th></th>
                                                <th>环比增长</th>
                                                <th>同比增长</th>
                                                <th>城市排名</th>
                                            </tr>
                                            </thead>
                                            <tbody id="body_shop_view">
                                            <tr style="height:10px"><td style="border-style:none;color:#ba1b20"><strong>总体</strong></td></tr>
                                            <tr><td style="border-style:none;" id="total_tc">-</td>
                                                <td align="right" style="border-style:none;" id="overview_tc_mom">-</td>
                                                <td align="right" style="border-style:none;" id="overview_tc_yoy">-</td>
                                                <td align="center" style="border-style:none;" id="overview_tc_rank">-</td>
                                            </tr>
                                            <tr><td style="border-style:none;color:#ba1b20"><strong>WQSR</strong></td></tr>
                                            <tr><td style="border-style:none;" id="west_tc">-</td>
                                                <td align="right" style="border-style:none;" id="west_tc_mom">-</td>
                                                <td align="right" style="border-style:none;" id="west_tc_yoy">-</td>
                                                <td align="center" style="border-style:none;" id="west_tc_rank">-</td>
                                            </tr>
                                            <tr><td style="border-style:none;color:#ba1b20"><strong>Pizza&Pasta</strong></td></tr>
                                            <tr><td style="border-style:none;" id="pizza_tc">-</td>
                                                <td align="right" style="border-style:none;" id="pizza_tc_mom">-</td>
                                                <td align="right" style="border-style:none;" id="pizza_tc_yoy">-</td>
                                                <td align="center" style="border-style:none;" id="pizza_tc_rank">-</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <#--end3-->
                            <#--<div class="col-md-3 col-sm-6">-->
                                <#--<div class="widget">-->
                                    <#--<header class="widget-header">-->
                                        <#--<h4 class="widget-title">外卖客单价</h4>-->
                                    <#--</header><!-- .widget-header &ndash;&gt;-->
                                    <#--<hr class="widget-separator">-->
                                    <#--<div class="widget-body p-t-lg">-->
                                        <#--<div class="clearfix m-b-md">-->
                                            <#--<h3 class="pull-left m-0 fw-500" style="color: #ba1b20">-->
                                                <#--<span class="counter" data-plugin="counterUp" id="overview_ta">-</span>元-->
                                            <#--</h3>-->
                                            <#--<div class="pull-right watermark"><i class="fa fa-3x fa-money"></i></div>-->
                                        <#--</div>-->
                                        <#--<div class="row">-->
                                            <#--<div class="col-sm-12">西式快餐：</div>-->
                                            <#--<div id="west_ta_yoy" class="col-sm-6">同比增长 -%</div>-->
                                            <#--<div id="west_ta_mom" class="col-sm-6">环比增长 -%</div>-->
                                        <#--</div>-->
                                        <#--<div class="row">-->
                                            <#--<div class="col-sm-12">Pizza&Pasta：</div>-->
                                            <#--<div id="pizza_ta_yoy" class="col-sm-6">同比增长 -%</div>-->
                                            <#--<div id="pizza_ta_mom" class="col-sm-6">环比增长 -%</div>-->
                                        <#--</div>-->
                                        <#--<h4 id="overview_ta_yoy">同比增长：-%<i class="glyphicon glyphicon-arrow-up"-->
                                                                           <#--style="color: #21dd21"></i></h4>-->
                                        <#--<h4 id="ta_rank">全国排名：-位</h4>-->
                                    <#--</div><!-- .widget-body &ndash;&gt;-->
                                <#--</div><!-- .widget &ndash;&gt;-->
                            <#--</div>-->
                        </div>
                    </div>
                </div>
            </div>
        <#----------------------------------店铺品类销售情况------------------------------------------->
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">店铺品类销售汇总
                                <button type="button" style="visibility:hidden" class="pull-right btn rounded btn-default" id="hide">销售额
                                </button>
                            </h4>
                        </header>
                        <hr class="widget-separator">
                        <div class="widget-body" style="text-align: center;">
                            <div id="table_div">
                                <table data-detail-view="true" id="compareplatform1" >

                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        <#----------------------------------品牌销售情况------------------------------------------->
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">品牌销售汇总
                                <button type="button"  class="pull-right btn rounded btn-default" id="btn_find">查询
                                </button>
                                <div class="col-md-6 pull-right" style="width: 280px">
                                    <select class="selectpicker" id="mapSearchBrands" data-live-search="true" data-actions-box="true"
                                            title="请选择品牌 (可多选)" multiple>
                                    </select>
                                </div>
                                <div class="pull-right">
                                    <select class="form-control" id="mapSearchCategory" style="width: 200px">
                                        <option value="-1">请选择品类...</option>
                                    <#list subCategoryNames as cat>
                                        <option value="${cat}">${cat}</option>
                                    </#list>
                                    </select>
                                </div>

                            </h4>
                        </header>
                        <hr class="widget-separator">
                        <div class="widget-body" style="text-align: center;">
                            <div id="compareplatform2">
                                <table id="default-datatable" data-plugin="DataTable" class="table table-striped"
                                       cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th style="width: 156px">品牌</th>
                                        <th>店铺数(家)</th>
                                        <th>客单数(万笔)</th>
                                        <th>客单数增长率%</th>
                                        <th>销售额(万元)</th>
                                        <th>店均客单价(元)</th>
                                        <th>客单价(元)</th>
                                        <th>折扣率%</th>
                                    </tr>
                                    </thead>
                                    <tbody id="topBrandTable">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        <#----------------------------------月度趋势------------------------------------------->
            <div class="row">
                <div class="col-md-9 col-sm-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title" id="widget1">月度趋势
                                <button type="button" class="pull-right btn rounded btn-default">店铺数
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default">销售额
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default button_active">客单数
                                </button>&nbsp;
                                <div class="col-sm-4 pull-right">
                                    <select class="form-control" id="searchMonth">
                                        <option value="6" selected="">过去6个月</option>
                                        <option value="12">过去12个月</option>
                                        <option value="18">过去18个月</option>
                                        <option value="24">过去24个月</option>
                                    </select>
                                </div>
                            </h4>
                        </header>
                        <hr class="widget-separator">
                        <div class="widget-body" style="height:322px">
                            <div id="sales" class="my_chart">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="widget countries-widget">
                        <header class="widget-header">
                            <div class="col-md-12">
                                <h4 class="widget-title">增长率
                                    <div class="col-sm-8 pull-right">
                                        <select class="form-control" id="rise_rate">
                                            <option value="0">同比增长率</option>
                                            <option value="1">复合增长率</option>
                                        </select>
                                    <div>
                                </h4>
                            <div>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div class="widget-body">
                            <div class="list-group m-0">
                                <div href="#" class="list-group-item clearfix">
                                    <span class="pull-left fw-500 fz-md" id="city_cagr_name">城市</span>
                                    <div class="pull-right"><span data-plugin="counterUp" id="city_cagr">-%</span></div>
                                </div>
                                <div href="#" class="list-group-item clearfix">
                                    <span class="pull-left fw-500 fz-md">所有监测城市</span>
                                    <div class="pull-right"><span data-plugin="counterUp" id="total_cagr">-%</span></div>
                                </div><!-- .list-group-item -->
                                <div href="#" class="list-group-item clearfix">
                                    <span class="pull-left fw-500 fz-md">一线城市</span>
                                    <div class="pull-right"><span data-plugin="counterUp" id="t1_cagr">-%</span></div>
                                </div><!-- .list-group-item -->
                                <div href="#" class="list-group-item clearfix">
                                    <span class="pull-left fw-500 fz-md">二线城市</span>
                                    <div class="pull-right"><span data-plugin="counterUp" id="t2_cagr">-%</span></div>
                                </div><!-- .list-group-item -->
                                <div href="#" class="list-group-item clearfix">
                                    <span class="pull-left fw-500 fz-md">三线及以下城市</span>
                                    <div class="pull-right"><span data-plugin="counterUp" id="t3_cagr">-%</span></div>
                                </div><!-- .list-group-item -->
                            </div><!-- .list-group -->
                        </div><!-- .widget-body -->
                    </div><!-- .widget -->
                </div>
            </div>
        <#----------------------------------不同平台情况比较------------------------------------------->
            <div class="row">
                <div class="col-md-6">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title" id="widget2">不同平台份额
                                <button type="button" class="pull-right btn rounded btn-default">店铺数
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default">销售额
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default button_active">客单数
                                </button>&nbsp;
                            </h4>
                        </header>
                        <hr class="widget-separator">
                        <div class="widget-body">
                            <div id="platform" class="my_chart">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title" id="widget2">品牌促销信息
                                <div class="pull-right" style="width: 280px">
                                    <select class="form-control" id="sales_promotion_brand">
                                        <option value="-1">请选择品牌...</option>
                                    </select>
                                </div>
                            </h4>
                        </header>
                        <hr class="widget-separator">
                        <div class="widget-body">
                            <div id="compareplatform" style="overflow-y:scroll;height:265px">
                                <table id="compareplatformtable" class="table table-hover" style="text-align: left;height:265px">
                                    <thead>
                                    <tr>
                                        <th>促销</th>
                                    </tr>
                                    </thead>
                                    <tbody id="sales_promotion_info">

                                    </tbody>
                                </table>
                            </div>
                        <#--分页-->
                        <#--<div class="pull-right">-->
                        <#--<ul class="pager">-->
                        <#--<li><a href="#">Previous</a></li>-->
                        <#--<li><a href="#">Next</a></li>-->
                        <#--</ul>-->
                        <#--</div>-->
                        </div>
                    </div>
                </div>
            </div>
        <#----------------------------------外卖销售热点图------------------------------------------->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">
                                <div class="col-sm-2">
                                    外卖销售热点图
                                </div>
                                <div class="col-sm-1">
                                    <input class="form-control" id="mapSearchInput" type="text"
                                           placeholder="输入地址以查询...">
                                </div>
                                <div class="col-sm-2">
                                    <select class="form-control" id="lightingChartCate" style="height:38px;">
                                        <option value="-1">请选择品类...</option>
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <select class="selectpicker" id="lightingChartBrand" data-live-search="true"
                                            title="请选择品牌 (可多选)" multiple data-max-options="5">
                                    </select>
                                    <input type="checkbox" id="show_shops"></input>
                                    <font style="font-size: 15px;vertical-align: middle;">显示店铺<font>
                                        <label type="button" class="btn rounded btn-default" id="map_search" style="background-color: #ba1b20;color: white;border-color: #ba1b20">确认</label>
                                </div>
                                <div class="col-sm-3" id="widget3">
                                    <button type="button" class="pull-right btn rounded btn-default">
                                        销售潜力
                                    </button>&nbsp;
                                    <button type="button" class="pull-right btn rounded btn-default">客单价
                                    </button>&nbsp;
                                    <button type="button" class="pull-right btn rounded btn-default button_active">销售额</button>&nbsp;
                                    
                                </div>
                            </h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div class="widget-body" id="mapDiv" style="height: 500px">

                        </div><!-- .widget-body -->
                    </div><!-- .widget -->
                </div>
            </div>
        <#----------------------------------增长最快的品牌------------------------------------------->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget products-widget">
                        <header class="widget-header">
                            <h4 class="widget-title">增长最快的品牌
                                <div class="col-sm-2 pull-right">
                                    <select class="form-control" id="fastBrand">

                                    </select>
                                </div>
                            </h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div class="widget-body">
                            <div class="row" id="fastBrandsTab">

                            </div><!-- .row -->
                        </div><!-- .widget-body -->
                    </div><!-- .widget -->
                </div>
            </div>
        <#----------------------------------宏观经济数据------------------------------------------->
            <div class="row" id="macroscopic">
                <div class="col-sm-12 col-md-12">
                    <div class="panel panel-success panel-custom"
                         style="border-bottom-color:  #ba1b20;border-top-color: #ba1b20;">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-4 col-sm-6">
                                    <div class="widget">
                                        <header class="widget-header">
                                            <h4 class="widget-title">城市消费评级</h4>
                                        </header><!-- .widget-header -->
                                        <hr class="widget-separator">
                                        <div class="widget-body p-t-lg">
                                            <div class="clearfix m-b-md">
                                                <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                    <span class="counter" ata-plugin="counterUp" id="cityLevel"></span>星
                                                </h3>
                                                <div class="pull-right watermark"><i class="fa fa-3x fa-star"></i></div>
                                            </div>
                                            <h4><!--城市经济评级：一级城市--></h4>
                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div>
                                <div class="col-md-4 col-sm-6">
                                    <div class="widget">
                                        <header class="widget-header">
                                            <h4 class="widget-title">常住人口</h4>
                                        </header><!-- .widget-header -->
                                        <hr class="widget-separator">
                                        <div class="widget-body p-t-lg">
                                            <div class="clearfix m-b-md">
                                                <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                    <span class="counter" data-plugin="counterUp" id="residentpop"></span>万人
                                                </h3>
                                                <div class="pull-right watermark"><i
                                                        class="fa fa-3x fa-street-view"></i></div>
                                            </div>
                                            <h4><!--全国排名：2位--></h4>
                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div>
                                <div class="col-md-4 col-sm-6">
                                    <div class="widget">
                                        <header class="widget-header">
                                            <h4 class="widget-title">消费能级指数</h4>
                                        </header><!-- .widget-header -->
                                        <hr class="widget-separator">
                                        <div class="widget-body p-t-lg">
                                            <div class="clearfix m-b-md">
                                                <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                    <span class="counter" data-plugin="counterUp" id="consumptionindex"></span>分
                                                </h3>
                                                <div class="pull-right watermark"><i class="fa fa-3x fa-money"></i>
                                                </div>
                                            </div>
                                            <h4><!-- 全国排名：1位--></h4>
                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 col-sm-6">
                                    <div class="widget">
                                        <header class="widget-header">
                                            <h4 class="widget-title">城镇化率</h4>
                                        </header><!-- .widget-header -->
                                        <hr class="widget-separator">
                                        <div class="widget-body p-t-lg">
                                            <div class="clearfix m-b-md">
                                                <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                    <span class="counter" data-plugin="counterUp" id="urbanizationrate"></span>%
                                                </h3>
                                                <div class="pull-right watermark"><i class="fa fa-3x fa-building"></i>
                                                </div>
                                            </div>
                                            <h4><!--全国排名：9位--></h4>
                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div>
                                <div class="col-md-4 col-sm-6">
                                    <div class="widget">
                                        <header class="widget-header">
                                            <h4 class="widget-title">社会消费品零售总额</h4>
                                        </header><!-- .widget-header -->
                                        <hr class="widget-separator">
                                        <div class="widget-body p-t-lg">
                                            <div class="clearfix m-b-md">
                                                <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                    <span class="counter" data-plugin="counterUp" id="rSCG"></span>亿元
                                                </h3>
                                                <div class="pull-right watermark"><i
                                                        class="fa fa-3x fa-shopping-cart"></i></div>
                                            </div>
                                            <h4><!--全国排名：2位--></h4>
                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div>
                                <div class="col-md-4 col-sm-6">
                                    <div class="widget">
                                        <header class="widget-header">
                                            <h4 class="widget-title">城镇居民人均可支配收入</h4>
                                        </header><!-- .widget-header -->
                                        <hr class="widget-separator">
                                        <div class="widget-body p-t-lg">
                                            <div class="clearfix m-b-md">
                                                <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                    <span class="counter" data-plugin="counterUp" id="pGDI"></span>元
                                                </h3>
                                                <div class="pull-right watermark"><i
                                                        class="fa fa-3x fa-credit-card-alt"></i></div>
                                            </div>
                                            <h4><!--全国排名：1位--></h4>
                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section><!-- #dash-content -->
    </div><!-- .wrap -->
    <!-- APP FOOTER -->
<#----------------------------------模态框------------------------------------------->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">XX品类过去12个月销售额趋势</h4>
                    <div class="pull-right">
                        <select class="form-control" id="selectCategory">
                            <option value="0">客单数</option>
                            <option value="1">销售额</option>
                            <option value="2">店铺数</option>
                            <option value="3">客单价</option>
                        </select>
                    </div>
                </div>
                <div class="modal-body">
                    <div id="category" style="height:300px;width:100%"></div>
                </div>
            </div>
        </div>
    </div>
<#include "../static/footer.ftl" >
</main>
<!--========== END app main -->

<script>


</script>
<script src="/res/assets/js/bootstrap-datepicker.js"></script>
<script src="../../res/libs/misc/datatables/datatables.min.js"></script>
<script src="../../res/assets/js/bootstrap-table.js"></script>
<script src="/res/assets/js/bootstrap-select.js"></script>
<script type="text/javascript"
        src='http://webapi.amap.com/maps?v=1.4.0&key=9fa8c62b85a987698a515fbddee8efa7&&plugin=AMap.ToolBar'></script>
<script src="/res/assets/js/jquery.webui-popover.min.js"></script>
<script type="text/javascript">

    var PLATFORM = ['美团外卖', '饿了么', '百度外卖'];
    var CHANNEL_PER_DATA=[];
    var PLATFORM_NAMES;
    var decimals_num=1;
    var widget1Btn = $("#widget1 button");
    var widget2Btn = $("#widget2 button");
    var widget3Btn = $("#widget3 button");
    var myChart1;
    var myChart2;
    var myChart3;
    var MONTHLY_RESULT;
    var MONTHS=6;//月度趋势显示月数
    var CATEGORY_TREND;
    var CATE_TYPE;
    var mapIndex=1;
    var search_city;
    var min_city_map_level=10;
    var max_city_map_level=18;
    var search_map_level=14;

    $(function(){
        //表头居中
        $("table th").css({
            "text-align": "center"
        })
        $("#over_view_div table th").css({
            "text-align": "right"
        })
        $("div.th-inner").css({
            "text-align": "center",
            "cursor":"pointer"
        })
        $('.datepicker').datepicker({
            format: 'yyyy-mm',
            startView: 1,
            todayHighlight: true,
            maxViewMode: 'years',
            minViewMode: 'months',
            endDate: new Date().Format('yyyyMM')
        });
        var username = '${user_name}';
        $("#userName").html(username);
        //设置默认日期，js获取完整的日期
        var mydate = '${yearMonth}'
        //获取完整的日期
        var date=new Date;
        var year=date.getFullYear();
        var start = (year.toString()+"-01");
        $('#start_picker').datepicker('update', start);
        $('#end_picker').datepicker('update', mydate);
        $("#mapSearchCategory").val("西式快餐");
        /*$("#lightingChartBrand").chosen({
            width: "100%",height:"38px",
            "placeholder_text_multiple":"请选择品牌...",
            "max_selected_options":"5"});*/
        initCityOptions();

        PLATFORM_NAMES=new Map();
        PLATFORM_NAMES.set("BaiduWaiMai","百度外卖");
        PLATFORM_NAMES.set("ELeMe","饿了么");
        PLATFORM_NAMES.set("MeiTuan","美团外卖");


        //品类品牌级联
        var data='${brandNames}'
        var brands=JSON.parse(data)
        getDropdown();
        $("#mapSearchBrands").selectpicker('selectAll');
        $("#mapSearchCategory").change(function () {
            getDropdown();
        });

        function getDropdown(){
            var category=$("#mapSearchCategory").val();
            $("#mapSearchBrands").empty();
            var html="";
            for(var i=0;i<brands.length;i++) {
                var subCategoryName = brands[i]
                if (subCategoryName.subCategoryName == category) {
                    html += "<option value=\""+subCategoryName.brandName+"\">"+subCategoryName.brandName+"</option>";
                }
            }
            $("#mapSearchBrands").append(html);
            $("#mapSearchBrands").selectpicker('refresh');
        }

        //品牌下拉框样式
        initBrandSelectStyle();

        //浮窗提示一下（“点击查看过去十二个月的趋势”）
        $('#name_tooltip').tooltip();

        //模态框  统计下拉框
        $("#selectCategory").val("0")
        $("#selectCategory").change(function () {
            getCategoryChart($("#selectCategory").val(),CATE_TYPE);
        });

        //促销下拉框
        $("#sales_promotion_brand").empty()
        var keyBrands=JSON.parse('${keyBrands}')
        var html="<option value='-1'>请选择品牌...</option>"
        for(var idx in keyBrands){
            html=html+"<option value='"+keyBrands[idx].brand+"'>"+keyBrands[idx].brand+"</option>"
        }
        $("#sales_promotion_brand").append(html)
        $("#sales_promotion_brand").change(function () {
            //不同平台情况比较(促销活动)
            initComparePlatFormTable();
        })
        //热点图品类下拉框
        var cates=new Array();
        var html=""
        for(var idx in keyBrands){
            var cate=keyBrands[idx].subCategory
            if(cates.indexOf(cate)==-1){
                cates.push(cate)
                html=html+"<option value='"+cate+"'>"+cate+"</option>"
            }
        }
        $("#lightingChartCate").append(html)
        $("#lightingChartCate").change(function () {
            var subCategory=$(this).val()
            //热点图品牌下拉框
            var html="";
            for(var idx in keyBrands){
                var subCate=keyBrands[idx].subCategory
                if(subCategory==subCate){
                    html=html+"<option value='"+keyBrands[idx].brand+"'>"+keyBrands[idx].brand+"</option>"
                }
            }
            $("#lightingChartBrand").empty()
            $("#lightingChartBrand").append(html)
            $("#lightingChartBrand").selectpicker('refresh');
        })
        $("#lightingChartBrand").bind("chosen:maxselected",function (e) {
            alert("最多只能选择5个！");
            return;
        });
        //品牌促销信息 初始化
        $("#sales_promotion_brand").val("肯德基")
        //不同平台情况比较(促销活动)
        initComparePlatFormTable();
        //增长最快的品牌  下拉框
        initFastSelect();
        $("#fastBrand").change(function(){
            //增长最快的品牌
            initFastPic();
        })
    });
    //增长最快的品牌  下拉框
    function initFastSelect(){
        $.get("/service/data/getSubCategoryNames",function (data) {
            if(data.code==="suc"){
                var realData=data.data;
                var html="<option value='-1'>请选择品类...</option>";
                $("#fastBrand").empty();
                var default_val=true;
                for (var i = 0; i <realData.length ; i++) {
                    var name = realData[i]["subCategoryName"]
                    if(default_val){
                        html += "<option value='" + name + "' selected>" + name + "</option>";
                        default_val=false
                    }else {
                        html += "<option value='" + name + "'>" + name + "</option>";
                    }
                }
                $("#fastBrand").append(html);
                //增长最快的品牌
                initFastPic();
            }
        });
    };
    //增长最快的品牌
    function initFastPic(){
        var start_month = $("#start_month").val();
        var end_month = $("#end_month").val();
        var city_name = $("#city_name").val();
        start_month=start_month.replace("-","")
        end_month=end_month.replace("-","")
        city_name=city_name.replace("-","")
        var subCategoryName=$("#fastBrand").val()
        $.get("/service/data/getCityBrandGrowthRate",
                {
                    cityName:city_name,
                    subCategoryName:subCategoryName,
                    startMonth:start_month,
                    endMonth:end_month,
                },
                function (data) {
                    if(data.code=="suc"){
                        var realData=data.data;
                        var html=""
                        realData.forEach(function(value,index) {
                            var img_url=""
                            if(value.logoUrl==null||value.logoUrl==""){
                                img_url="../assets/images/default_shop.jpg"
                            }else{
                                img_url=value.logoUrl
                            }
                            html = html + "<div class=\"col-sm-6 col-md-3\">\n" +
                                    "    <a href=\"javascript:void(0)\" class=\"product\">\n" +
                                    "        <img class=\"img-responsive\" style='width:100%;height:200px;'src='"+img_url+"'"+
                                    "             alt=\"oroduct image\">\n" +
                                    "        <div class=\"product-caption2 clearfix\" style=\"background-color: #6a6a6ac9\">\n" +
                                    "            <span>" + value.brandname + "</span><br>\n" +
                                    "            <span class=\"pull-right\">" + (new Number(value.storeTCGrowthRate) * 100).toFixed(decimals_num) + "%</span>\n" +
                                    "        </div><!-- .product-caption -->\n" +
                                    "    </a><!-- .product -->\n" +
                                    "</div><!-- END column -->"

                        })
                        $("#fastBrandsTab").empty()
                        $("#fastBrandsTab").append(html)
                    }
                }
        )
    };

    //宏观数据
    function init_macroscopic(){
        //-----暂时------
        // var city=$("#city_name").val()
        // if(city=="上海"){
        //     $("#macroscopic").attr("hidden",false)
        // }else{
        //     $("#macroscopic").attr("hidden",true)
        // }
    }

    function initBrandSelectStyle(){
        $(".chosen-choices").css({
            "box-shadow": "none",
            "box-sizing": "border-box"
        })
        $(".chosen-search-input").css({
            "border-radius": "3px",
            "height": "34px",
            "box-shadow": "none",
            "border-color": "#ddd",
            "font-size": "14px",
            "line-height": "1.428571429",
            "color": "#555555",
            "background-color": "#fff",
            "background-image": "none",
            "border": "1px solid #ccc",
            "padding-left": "12px"
        })
    }

    function initCityOptions(){
        $.get("/service/view/get_city_name",function (data) {
            if(data.code==="suc"){
                var realData=data.data;
                var html="";
                for (var i = 0; i <realData.length ; i++) {
                    html+="<option>"+realData[i]["cityName"]+"</option>";
                }
                $("#city_name").append(html);
                //搜索下拉框
                $("#city_name").chosen();
                $(".chosen-single").css({
                    "height":"38px",
                    "background":"none"
                })
                $(".chosen-single span").css({
                    "margin-top":"5px"
                })
                $(".chosen-single div").css({
                    "margin-top":"5px"
                })
                $("#city_name").val("上海")
                $('#city_name').trigger('chosen:updated');//更新选项
                initData();
            }

        });
    }
    function initCityConsumption(city_name){
        $.ajax({
            type: "GET",
            url: "/service/data/getOverviewResultbyCityConsumption?city_name=" + city_name,
            async: true,
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        var consumption=res.data;
                        $("#cityLevel").empty()
                        $("#cityLevel").append(formatNum(new Number(consumption.cityLevel).toFixed(1)))//城市消费评级
                        $("#residentpop").empty()
                        $("#residentpop").append(formatNum(new Number(consumption.residentpop).toFixed(1)))//常住人口
                        $("#consumptionindex").empty()
                        $("#consumptionindex").append(formatNum(new Number(consumption.consumptionindex)))//消费能级指数
                        $("#urbanizationrate").empty()
                        $("#urbanizationrate").append(formatNum(new Number(consumption.urbanizationrate).toFixed(1)))//城镇化率
                        $("#rSCG").empty()
                        $("#rSCG").append(formatNum(new Number(consumption.rscg).toFixed(1)))//社会消费品零售总额
                        $("#pGDI").empty()
                        $("#pGDI").append(formatNum(new Number(consumption.pgdi).toFixed(1)))//城镇居民人均可支配收入
                    } catch (e) {
                        // console.info(e);
                    }
                }
            }
        });
    }
    $("#search").click(function () {
        initData();

    });

    function initData(){
        var start_month = $("#start_month").val();
        var end_month = $("#end_month").val();
        var city_name = $("#city_name").val();
        start_month=start_month.replace("-","")
        end_month=end_month.replace("-","")
        city_name=city_name.replace("-","")
        var brand=$("#sales_promotion_brand").val()
        //不同平台情况比较(促销活动)
        initComparePlatFormTable(city_name,start_month,end_month,brand);
        //品牌销售情况
        initCityBrandTable();

        //店铺品类销售情况（品类品牌下拉框必须选择）
        buildTable(city_name, start_month, end_month);
        getCityView(city_name,start_month,end_month);
        getChannelPer(city_name,start_month,end_month);
        getMonthlyResult(city_name,end_month);
        getCAGRbyCity(city_name, start_month, end_month,0);
        //复合增长率样式
        init_growth_rate_style()
        init_macroscopic();
        //地图默认城市与所选城市相同
        $("#mapSearchInput").val($("#city_name").val());
        map.setCity($("#city_name").val());
        // getRatebyCitySub();
        getRankings(city_name, start_month, end_month);
        // getOverviewResultbyCitySub(city_name, start_month, end_month);
        initCityConsumption(city_name)
    }

    $("#btn_find").click(function () {
        initCityBrandTable();
    });

    //复合增长率样式
    function init_growth_rate_style(){
        $(".countries-widget .list-group-item:first-child").css({
            "background": "#ba1b20",
            "color": "#ffffff"
        })
    }

    //绿色向上箭头、红色向下箭头
    var up_arrow="%<i class=\"glyphicon glyphicon-arrow-up\" style=\"color: #21dd21\"></i>";
    var down_arrow="%<i class=\"glyphicon glyphicon-arrow-down\" style=\"color: #ff0000\"></i>";
    //扁箭头
    var up_arrow2="%<i class=\"glyphicon glyphicon-chevron-up\" style=\"color: #21dd21\"></i>";
    var down_arrow2="%<i class=\"glyphicon glyphicon-chevron-down\" style=\"color: #ff0000\"></i>";

    //数据概览
    function getCityView2(city_name,start_month,end_month){
        $.get("/service/data/get_city_view_result",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month
                },
                function (data) {
                    // console.log(data);

                    if(data.code=="suc"){
                        var realData=data.data;
                        var val_unit=convBill(realData.totStoreNo,decimals_num);
                        $("#total_shop").html(val_unit['num']+" "+val_unit['unit']+"家");
                        var val_unit=convBill(realData.totSalesValue,decimals_num);
                        $("#total_sales").html(val_unit['num']+" "+val_unit['unit']+"元");
                        var val_unit=convBill(realData.totTC,decimals_num);
                        $("#total_tc").html(val_unit['num']+" "+val_unit['unit']+"笔");
                        var val_unit=convBill(realData.totTA,1);
                        $("#total_ta").html(val_unit['num']+" "+val_unit['unit']);
                        if(realData.totStoreNoYoY>=0){
                            $("#overview_store_yoy").html((realData.totStoreNoYoY*100).toFixed(decimals_num)+up_arrow);
                        }else {
                            $("#overview_store_yoy").html((realData.totStoreNoYoY*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.totSalesValueYoY>=0){
                            $("#overview_sales_yoy").html((realData.totSalesValueYoY*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#overview_sales_yoy").html((realData.totSalesValueYoY*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.totTCYoY>=0){
                            $("#overview_tc_yoy").html((realData.totTCYoY*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#overview_tc_yoy").html((realData.totTCYoY*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.totTAYoY>=0){
                            $("#overview_ta_yoy").html((realData.totTAYoY*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#overview_ta_yoy").html((realData.totTAYoY*100).toFixed(decimals_num)+down_arrow);
                        }
                        //环比
                        if(realData.totStoreNoMoM>=0){
                            $("#overview_store_mom").html((realData.totStoreNoMoM*100).toFixed(decimals_num)+up_arrow);
                        }else {
                            $("#overview_store_mom").html((realData.totStoreNoMoM*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.totSalesValueMoM>=0){
                            $("#overview_sales_mom").html((realData.totSalesValueMoM*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#overview_sales_mom").html((realData.totSalesValueMoM*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.totTCMoM>=0){
                            $("#overview_tc_mom").html((realData.totTCMoM*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#overview_tc_mom").html((realData.totTCMoM*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.totTAMoM>=0){
                            $("#overview_ta_mom").html((realData.totTAMoM*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#overview_ta_mom").html((realData.totTAMoM*100).toFixed(decimals_num)+down_arrow);
                        }
                    }
                }
        );
    }
    function getCityView(cityTier,startMonth, endMonth) {
        $.ajax({
            type: "GET",
            url: "/service/data/get_overview_result_rate?start_month=" + startMonth + "&end_month=" + endMonth
            + "&city_tier=" + cityTier,
            success: function (res) {
                if (res.code === "suc") {
                    var realData = res.data;
                    console.log(realData);
                    try {
                        //----------------------------总体----------------------------
                        var mUp = "&nbsp;&nbsp;<i class='glyphicon glyphicon-arrow-up' style='color: #21dd21'></i>";
                        var mDown = "&nbsp;&nbsp;<i class='glyphicon glyphicon-arrow-down' style='color: #ff3300'></i>";
                        var yUp = "&nbsp;&nbsp;<i class='glyphicon glyphicon-chevron-up' style='color: #21dd21'></i>";
                        var yDown = "&nbsp;&nbsp;<i class='glyphicon glyphicon-chevron-down' style='color: #ff3300'></i>";
                        realData.forEach(function(val,idx) {
                            //----------------------------总体----------------------------
                            if (val.subSegmentID==1){
                                if (val.salesmom >= 0) {
                                    $("#overview_sales_mom").html(
                                            formatNum((val.salesmom * 100).toFixed(decimals_num)) + " %" + mUp);
                                } else {
                                    $("#overview_sales_mom").html(
                                            formatNum((val.salesmom * 100).toFixed(decimals_num)) + " %" + mDown);
                                }
                                if (val.salesyoy >= 0) {
                                    $("#overview_sales_yoy").html(
                                            formatNum((val.salesyoy * 100).toFixed(decimals_num)) + " %" + mUp);
                                } else {
                                    $("#overview_sales_yoy").html(
                                            formatNum((val.salesyoy * 100).toFixed(decimals_num)) + " %" + mDown);
                                }

                                if (val.tcmom >= 0) {
                                    $("#overview_tc_mom").html(
                                            formatNum((val.tcmom * 100).toFixed(decimals_num)) + " %" + mUp);
                                } else {
                                    $("#overview_tc_mom").html(
                                            formatNum((val.tcmom * 100).toFixed(decimals_num)) + " %" + mDown);
                                }
                                if (val.tcyoy >= 0) {
                                    $("#overview_tc_yoy").html(
                                            formatNum((val.tcyoy * 100).toFixed(decimals_num)) + " %" + mUp);
                                } else {
                                    $("#overview_tc_yoy").html(
                                            formatNum((val.tcyoy * 100).toFixed(decimals_num)) + " %" + mDown);
                                }

                                if (val.storenomom >= 0) {
                                    $("#overview_store_mom").html(
                                            formatNum((val.storenomom * 100).toFixed(decimals_num)) + " %" + mUp);
                                } else {
                                    $("#overview_store_mom").html(
                                            formatNum((val.storenomom * 100).toFixed(decimals_num)) + " %" + mDown);
                                }
                                if (val.storenoyoy >= 0) {
                                    $("#overview_store_yoy").html(
                                            formatNum((val.storenoyoy * 100).toFixed(decimals_num)) + " %" + mUp);
                                } else {
                                    $("#overview_store_yoy").html(
                                            formatNum((val.storenoyoy * 100).toFixed(decimals_num)) + " %" + mDown);
                                }


                                $("#total_sales").html(fitNum(val.sales.toString())+"元");
                                $("#total_tc").html(fitNum(val.tc.toString())+"笔");
                                $("#total_shop").html(fitNum(val.storeNo.toString())+"家");
                            }
                            //----------------------------WQSR----------------------------
                            if (val.subSegmentID==2) {
                                var salesMoM = formatNum((val.salesmom * 100).toFixed(decimals_num));
                                var salesYoY = formatNum((val.salesyoy * 100).toFixed(decimals_num));
                                if (val.salesmom >= 0) {
                                    $("#west_sales_mom").html("<span>" + salesMoM + " %</span>" + mUp);
                                } else {
                                    $("#west_sales_mom").html("<span>" + salesMoM + " %</span>" + mDown);
                                }
                                if (val.salesyoy >= 0) {
                                    $("#west_sales_yoy").html("<span>" + salesYoY + " %</span>" + mUp);
                                } else {
                                    $("#west_sales_yoy").html("<span>" + salesYoY + " %</span>" + mDown);
                                }
                                var tcMoM = formatNum((val.tcmom * 100).toFixed(decimals_num));
                                var tcYoY = formatNum((val.tcyoy * 100).toFixed(decimals_num));
                                if (val.tcmom >= 0) {
                                    $("#west_tc_mom").html("<span>" + tcMoM + " %</span>" + mUp);
                                } else {
                                    $("#west_tc_mom").html("<span>" + tcMoM + " %</span>" + mDown);
                                }
                                if (val.tcyoy >= 0) {
                                    $("#west_tc_yoy").html("<span>" + tcYoY + " %</span>" + mUp);
                                } else {
                                    $("#west_tc_yoy").html("<span>" + tcYoY + " %</span>" + mDown);
                                }

                                var storeMoM = formatNum((val.storenomom * 100).toFixed(decimals_num));
                                var storeYoY = formatNum((val.storenoyoy * 100).toFixed(decimals_num));
                                if (val.storenomom >= 0) {
                                    $("#west_store_mom").html("<span>" + storeMoM + " %</span>" + mUp);
                                } else {
                                    $("#west_store_mom").html("<span>" + storeMoM + " %</span>" + mDown);
                                }
                                if (val.storenoyoy >= 0) {
                                    $("#west_store_yoy").html("<span>" + storeYoY + " %</span>" + mUp);
                                } else {
                                    $("#west_store_yoy").html("<span>" + storeYoY + " %</span>" + mDown);
                                }
                                $("#west_sales").html(fitNum(new Number(val.sales).toFixed(decimals_num))+"元");
                                $("#west_tc").html(fitNum(val.tc.toString())+"笔");
                                $("#west_shop").html(fitNum(val.storeNo.toString())+"家");
                            }
                            //----------------------------Pizza----------------------------
                            if (val.subSegmentID==3) {
                                var salesMoM = formatNum((val.salesmom * 100).toFixed(decimals_num));
                                var salesYoY = formatNum((val.salesyoy * 100).toFixed(decimals_num));
                                if (val.salesmom >= 0) {
                                    $("#pizza_sales_mom").html("<span>" + salesMoM + " %</span>" + mUp);
                                } else {
                                    $("#pizza_sales_mom").html("<span>" + salesMoM + " %</span>" + mDown);
                                }
                                if (val.salesyoy >= 0) {
                                    $("#pizza_sales_yoy").html("<span>" + salesYoY + " %</span>" + mUp);
                                } else {
                                    $("#pizza_sales_yoy").html("<span>" + salesYoY + " %</span>" + mDown);
                                }
                                var tcMoM = formatNum((val.tcmom * 100).toFixed(decimals_num));
                                var tcYoY = formatNum((val.tcyoy * 100).toFixed(decimals_num));
                                if (val.tcmom >= 0) {
                                    $("#pizza_tc_mom").html("<span>" + tcMoM + " %</span>" + mUp);
                                } else {
                                    $("#pizza_tc_mom").html("<span>" + tcMoM + " %</span>" + mDown);
                                }
                                if (val.tcyoy >= 0) {
                                    $("#pizza_tc_yoy").html("<span>" + tcYoY + " %</span>" + mUp);
                                } else {
                                    $("#pizza_tc_yoy").html("<span>" + tcYoY + " %</span>" + mDown);
                                }

                                var storeMoM = formatNum((val.storenomom * 100).toFixed(decimals_num));
                                var storeYoY = formatNum((val.storenoyoy * 100).toFixed(decimals_num));
                                if (val.storenomom >= 0) {
                                    $("#pizza_store_mom").html("<span>" + storeMoM + " %</span>" + mUp);
                                } else {
                                    $("#pizza_store_mom").html("<span>" + storeMoM + " %</span>" + mDown);
                                }
                                if (val.storenoyoy >= 0) {
                                    $("#pizza_store_yoy").html("<span>" + storeYoY + " %</span>" + mUp);
                                } else {
                                    $("#pizza_store_yoy").html("<span>" + storeYoY + " %</span>" + mDown);
                                }
                                $("#pizza_sales").html(fitNum(new Number(val.sales).toFixed(decimals_num))+"元");
                                $("#pizza_tc").html(fitNum(val.tc.toString())+"笔");
                                $("#pizza_shop").html(fitNum(val.storeNo.toString())+"家");
                            }
                        });

                        //设置表格样式
                        $(".table_overview tr").css({
                            "height":"38px"
                        })
                        $(".table_overview td").css({
                            "padding":"1px"
                        })
                        $("#body_shop_view tr td:first-child").css({
                            "padding-left":"12px"
                        })

                    } catch (e) {
                    }
                }
            }
        });
    }

    function getRatebyCitySub(){
        var start_month = $("#start_month").val();
        var end_month = $("#end_month").val();
        var city_name = $("#city_name").val();
        $.get("/service/data/get_rate_by_city_sub",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month,
                    subcategory:"西式快餐"
                },
                function (data) {
                    if(data.code==="suc"){
                        var realData=data.data;
                        if(realData.ppstoreNoYoY>=0){
                            $("#west_store_yoy").html((realData.ppstoreNoYoY*100).toFixed(decimals_num)+up_arrow);
                        }else {
                            $("#west_store_yoy").html((realData.ppstoreNoYoY*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.ppsalesValueYoY>=0){
                            $("#west_sales_yoy").html((realData.ppsalesValueYoY*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#west_sales_yoy").html((realData.ppsalesValueYoY*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.pptcyoY>=0){
                            $("#west_tc_yoy").html((realData.pptcyoY*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#west_tc_yoy").html((realData.pptcyoY*100).toFixed(decimals_num)+down_arrow);
                        }

                        if(realData.ppstoreNoMoM>=0){
                            $("#west_store_mom").html((realData.ppstoreNoMoM*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#west_store_mom").html((realData.ppstoreNoMoM*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.ppsalesValueMoM>=0){
                            $("#west_sales_mom").html((realData.ppsalesValueMoM*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#west_sales_mom").html((realData.ppsalesValueMoM*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.pptcmoM>=0){
                            $("#west_tc_mom").html((realData.pptcmoM*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#west_tc_mom").html((realData.pptcmoM*100).toFixed(decimals_num)+down_arrow);
                        }

                        /*$("#west_ta_yoy").html((realData.pptayoY*100).toFixed(decimals_num)+"%");
                        $("#west_ta_mom").html((realData.pptamoM*100).toFixed(decimals_num)+"%");*/
                    }
                }
        );
        $.get("/service/data/get_rate_by_city_sub",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month,
                    subcategory:"pizza&pasta"
                },
                function (data) {
                    if(data.code==="suc"){
                        var realData=data.data;
                        if(realData.ppstoreNoYoY>=0){
                            $("#pizza_store_yoy").html((realData.ppstoreNoYoY*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#pizza_store_yoy").html((realData.ppstoreNoYoY*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.ppsalesValueYoY>=0){
                            $("#pizza_sales_yoy").html((realData.ppsalesValueYoY*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#pizza_sales_yoy").html((realData.ppsalesValueYoY*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.pptcyoY>=0){
                            $("#pizza_tc_yoy").html((realData.pptcyoY*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#pizza_tc_yoy").html((realData.pptcyoY*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.ppstoreNoMoM>=0){
                            $("#pizza_store_mom").html((realData.ppstoreNoMoM*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#pizza_store_mom").html((realData.ppstoreNoMoM*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.ppsalesValueMoM>=0){
                            $("#pizza_sales_mom").html((realData.ppsalesValueMoM*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#pizza_sales_mom").html((realData.ppsalesValueMoM*100).toFixed(decimals_num)+down_arrow);
                        }
                        if(realData.pptcmoM>=0){
                            $("#pizza_tc_mom").html((realData.pptcmoM*100).toFixed(decimals_num)+up_arrow);
                        }else{
                            $("#pizza_tc_mom").html((realData.pptcmoM*100).toFixed(decimals_num)+down_arrow);
                        }

                        // $("#pizza_sales_yoy").html((realData.ppsalesValueYoY*100).toFixed(decimals_num)+"%");
                        // $("#pizza_tc_yoy").html((realData.pptcyoY*100).toFixed(decimals_num)+"%");
                        // $("#pizza_store_mom").html((realData.ppstoreNoMoM*100).toFixed(decimals_num)+"%");
                        // $("#pizza_sales_mom").html((realData.ppsalesValueMoM*100).toFixed(decimals_num)+"%");
                        // $("#pizza_tc_mom").html((realData.pptcmoM*100).toFixed(decimals_num)+"%");
                       /* $("#pizza_ta_yoy").html((realData.pptayoY*100).toFixed(decimals_num)+"%");
                        $("#pizza_ta_mom").html((realData.pptamoM*100).toFixed(decimals_num)+"%");*/
                    }
                }
        );
    }

    function getOverviewResultbyCitySub(city_name,start_month,end_month) {
        $.get("/service/data/getOverviewResultbyCitySub",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month,
                    subcate:"西式快餐"
                },
                function (data) {
                    if(data.code==="suc"){
                        var realData=data.data;
                        var val_unit=convBill(realData.subCategoryStoreNo,decimals_num);
                        $("#west_shop").html(val_unit['num']+" "+val_unit['unit']+"家");
                        var val_unit=convBill(realData.subCategorySalesValue,decimals_num);
                        $("#west_sales").html(val_unit['num']+" "+val_unit['unit']+"元");
                        var val_unit=convBill(realData.subCategoryTC,decimals_num);
                        $("#west_tc").html(val_unit['num']+" "+val_unit['unit']+"笔");
                    }
                }
        );
        $.get("/service/data/getOverviewResultbyCitySub",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month,
                    subcate:"pizza&pasta"
                },
                function (data) {
                    if(data.code==="suc"){
                        var realData=data.data;
                        var val_unit=convBill(realData.subCategoryStoreNo,decimals_num);
                        $("#pizza_shop").html(val_unit['num']+" "+val_unit['unit']+"家");
                        var val_unit=convBill(realData.subCategorySalesValue,decimals_num);
                        $("#pizza_sales").html(val_unit['num']+" "+val_unit['unit']+"元");
                        var val_unit=convBill(realData.subCategoryTC,decimals_num);
                        $("#pizza_tc").html(val_unit['num']+" "+val_unit['unit']+"笔");
                    }
                }
        );
    }

    function getRankings(city_name, start_month, end_month){
        $.get("/service/data/get_ranking_by_city",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month
                },
                function (data) {
                    if(data.code==="suc"){
                        var realData=data.data;
                        $("#overview_shop_rank").html(realData.storeNoRanking+"/20");
                        $("#overview_sales_rank").html(realData.salesValueRanking+"/20");
                        $("#overview_tc_rank").html(realData.tcranking+"/20");
                    }
                }
        );

        $.get("/service/data/getTopCityRakingofSubcategory",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month,
                    subcate:"西式快餐"
                },
                function (data) {
                    if(data.code==="suc"){
                        var realData=data.data;
                        $("#west_shop_rank").html(realData.subStoreNoRanking+"/20");
                        $("#west_sales_rank").html(realData.subSalesValueRanking+"/20");
                        $("#west_tc_rank").html(realData.subTCRanking+"/20");
                    }
                }
        );
        $.get("/service/data/getTopCityRakingofSubcategory",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month,
                    subcate:"pizza&pasta"
                },
                function (data) {
                    if(data.code==="suc"){
                        var realData=data.data;
                        $("#pizza_shop_rank").html(realData.subStoreNoRanking+"/20");
                        $("#pizza_sales_rank").html(realData.subSalesValueRanking+"/20");
                        $("#pizza_tc_rank").html(realData.subTCRanking+"/20");
                    }
                }
        );
    }

    function getChannelPer(city_name,start_month,end_month){
        $.get("/service/data/get_channel_per_result",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month
                },
                function (data) {
                    // console.log(data);
                    if(data.code==="suc"){
                        CHANNEL_PER_DATA=data.data;
                        getPieCharts(1);
                        getPieCharts(0);
                    }else {
                        noDataHandler(myChart2,$("#platform"));
                    }
                }
        );
    }

    function getMonthlyResult(city_name,end_month){
        $.get("/service/data/get_monthly_result_by_city_channel",
                {
                    city_name:city_name,
                    end_time:end_month,
                    month_num:24
                },
                function (data) {
                    // console.log(data);
                    if(data.code==="suc"){
                        MONTHLY_RESULT=data.data;
                        getSalesCharts(0);
                    }else {
                        noDataHandler(myChart1,$("#sales"));
                    }
                }
        );
    }

    function getCAGRbyCity(city_name, start_month, end_month ,index){
        var selector;
        if (index==0)
            selector="同比增长率";
        else if(index==1)
            selector="复合增长率";
        $.get("/service/data/get_yoy_overview_result_by_city",
                {
                    city_name:city_name,
                    start_month:start_month,
                    end_month:end_month,
                    selector:selector
                },
                function (data) {
                    // console.log(data);
                    if(data.code==="suc"){
                        var realData=data.data;
                        if(index==0){
                            $("#city_cagr").html((realData.cityTotTCYoY*100).toFixed(decimals_num)+"%");
                            $("#total_cagr").html((realData.totTCYoY*100).toFixed(decimals_num)+"%");
                            $("#t1_cagr").html((realData.tier1TotTCYoY*100).toFixed(decimals_num)+"%");
                            $("#t2_cagr").html((realData.tier2TotTCYoY*100).toFixed(decimals_num)+"%");
                            $("#t3_cagr").html((realData.tier3TotTCYoY*100).toFixed(decimals_num)+"%");
                        }else if(index==1){
                            $("#city_cagr").html((realData.cityTotTCCAGR*100).toFixed(decimals_num)+"%");
                            $("#total_cagr").html((realData.totTCCAGR*100).toFixed(decimals_num)+"%");
                            $("#t1_cagr").html((realData.tier1TotTCCAGR*100).toFixed(decimals_num)+"%");
                            $("#t2_cagr").html((realData.tier2TotTCCAGR*100).toFixed(decimals_num)+"%");
                            $("#t3_cagr").html((realData.tier3TotTCCAGR*100).toFixed(decimals_num)+"%");
                        }
                        $("#city_cagr_name").html(realData.cityName);
                    }
                }
        );
    }

    $("#rise_rate").change(function () {
        var start_month = $("#start_month").val();
        var end_month = $("#end_month").val();
        var city_name = $("#city_name").val();
        var selector=$("#rise_rate").val();
        getCAGRbyCity(city_name,start_month,end_month,selector);
    });

    $("#searchMonth").change(function () {
        MONTHS=$("#searchMonth").val();
        // var eleHtml = ele.html().replace(/\s+/g, "");
        var eleHtml = $("#widget1 .button_active").html().replace(/\s+/g, "");
        //改变当前tab参数
        if (eleHtml === '店铺数') {
            getSalesCharts(2);
        } else if (eleHtml === '销售额') {
            getSalesCharts(1);
        } else {
            getSalesCharts(0);
        }
    });

    $(".app-menu li").each(function () {
        $(this).removeAttr("class");
    });
    $(".app-menu li a").each(function () {
        $(this).removeAttr("style");
    });
    $("#menu_city").attr("class", "active");
    $("#menu_city a").attr("style", "color: #ba1b20");

    $("#nav_bar").append("<li>\n" +
            "                    <a class=\"page-title hidden-menubar-top hidden-float\" style='color: white'>/城市概况</a>\n" +
            "                </li>");

    var map = new AMap.Map('mapDiv', {
        resizeEnable: true,
        zoom: 15,
        center: [121.45, 31.22],
        zoomEnable: true,
        dragEnable: true,
        zooms: [min_city_map_level, max_city_map_level]
    });

    var toolBar = new AMap.ToolBar({
        visible: true
    });
    map.addControl(toolBar);
    AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
        var autoOptions = {
            city: 310115, //城市，默认全国
            input: "mapSearchInput"//使用联想输入的input的id
        };
        autocomplete = new AMap.Autocomplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            city: '上海',
            map: map
        });
        AMap.event.addListener(autocomplete, "select", function (e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name, function () {
                try {
                    //针对具体地址
                    map.setZoomAndCenter(search_map_level, [e.poi.location.lng, e.poi.location.lat]);
                } catch (e1) {
                    //针对城市
                    map.setCity(e.poi.adcode);
                }
                autoOptions.city = e.poi.adcode;
                var city_name=$("#mapSearchInput").val();
                generateHeatMap(mapIndex,city_name);
            });
        });
        //对地图移动结束的事件进行监听，地图移动结束之后，触发地图变化的操作
        // map.on('moveend', function (e) {
        //     generateHeatMap(mapIndex);
        // });
    });


    $("#map_search").click(function () {
        var city_name=$("#mapSearchInput").val();
        generateHeatMap(mapIndex,city_name);
    });

    var max_loop=2;//防止地址搜不出来死循环
    function generateHeatMap(index,city_name){
        mapMarker = [];
        map.clearMap();

        map.plugin(["AMap.Heatmap"], function () {
            //初始化heatmap对象
            if (typeof heatMap === 'undefined') {
                heatMap = new AMap.Heatmap(map, {
                    radius: 30, //给定半径
                    opacity: [0, 0.9],
                    gradient: {
                        0.2: '#1bff13',
                        0.5: '#279eff',
                        0.8: '#ffc83e',
                        0.9: '#ff7a22',
                        1.0: '#ff2825'
                    }
                });
            }
            //清空热力图
            heatMap.setDataSet({
                max: 0,
                data: []
            });
        });

        var points = [];
        var max = 0;
        var infoWindow = new AMap.InfoWindow({
            closeWhenClickMap: true,
            isCustom: true,
            offset: new AMap.Pixel(0, -30)
        });

        var bounds = map.getBounds();
        var max_lng = bounds.northeast.lng;
        var min_lng = bounds.southwest.lng;
        var max_lat = bounds.northeast.lat;
        var min_lat = bounds.southwest.lat;

        var start_month = $("#start_month").val();
        var end_month = $("#end_month").val();
        var subcategory=$("#lightingChartCate").val();
        var brand_name=$("#lightingChartBrand").val();
        var show_shops=$("#show_shops").is(':checked');
        var colorArray = ['#ffcd96;', '#97ffa2;', '#00bcff;','#a5388b;','#c2151a;'];

        if (start_month === null || end_month === null || city_name===null || subcategory===null || brand_name===null) {
            return;
        }
        $.get("/service/data/get_city_map_overview_result",
                {
                    start_month:start_month,
                    end_month:end_month,
                    city_name:city_name,
                    subcategory:subcategory,
                    brand_name:encodeURIComponent(brand_name),
                    max_lng:max_lng,
                    min_lng:min_lng,
                    max_lat:max_lat,
                    min_lat:min_lat
                },
                function (data) {
                    // console.log(data);
                    if(data.code=="suc"){
                        search_city=city_name;
                        max_loop=2;

                        var realData=data.data;
                        //商圈容量数据暂无，暂时处理
                        if (index === 3) {
                            return;
                        }
                        for (var i = 0; i < realData.length; i++) {
                            var val = "";
                            if (index === 1) {
                                val = realData[i].storeSales;
                            } else if (index === 2) {
                                val = realData[i].storeTA;
                            }
                            max = Math.max(max, val);
                            var point = {
                                lng: realData[i].longitude,
                                lat: realData[i].latitude,
                                count: val
                            }
                            points.push(point);
                        }
                        heatMap.setDataSet({
                            max: max,
                            data: points
                        });

                        if(!show_shops)
                            return;
                        var otherColor = [];
                        for (var i = 0; i < realData.length; i++) {
                            var marker_icon = '', marker_name = '';
                            var marker_val = "";
                            var marker_title = "";
                            var shopInfo = "";
                            if (index === 1) {
                                marker_val = realData[i].storeSales;
                                marker_title = "销售额：";
                            } else if (index === 2) {
                                marker_val = realData[i].storeTA;
                                marker_title = "客单价：";
                            } else if (index === 3) {
                                marker_val = "";
                                marker_title = "";
                            }

                            var marker_icon = '';

                            //如果是指定的店铺，则用对应的颜色，否则从颜色数组里取一个，相同品牌用相同的颜色
                            if (realData[i].brand === '肯德基') {
                                marker_icon = "<div class='kfc_pushpin'></div>";
                            } else if (realData[i].brand === '必胜客') {
                                marker_icon = "<div class='ph_pushpin'></div>";
                            } else if (realData[i].brand === '必胜宅急送') {
                                marker_icon = "<div class='phd_pushpin'></div>";
                            } else if (realData[i].brand === '麦当劳') {
                                marker_icon = "<div class='mcd_pushpin'></div>";
                            } else {
                                //先看此品牌之前是否取到过，若取到，则一定设置过颜色，则取此颜色即可
                                var colorIndex = $.inArray(realData[i].brand, otherColor);
                                if (colorIndex === -1) {
                                    //如果不存在，则先放入品牌数组，说明此品牌被取到过了
                                    otherColor.push(realData[i].brand);
                                    //然后根据品牌数组的index取颜色,由于限制了最多选项个数，则颜色的最多个数与限制的选项数相同
                                    colorIndex = $.inArray(realData[i].brand, otherColor);
                                }
                                var color = colorArray[colorIndex];
                                marker_icon = "<div style='width: 18px;\n" +
                                        "        height: 18px;\n" +
                                        "        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;\n" +
                                        "        transform: rotate(135deg);\n" +
                                        "        background-color: " + color + "\n" +
                                        "        border-color: #888886;\n" +
                                        "        border-style: solid;\n" +
                                        "        border-width: 2px;'></div>";
                            }


                            shopInfo = "品牌：" + realData[i].brand + "<br>店名：" + realData[i].storeName;
                            var marker = new AMap.Marker({
                                content: marker_icon,
                                position: [realData[i].longitude, realData[i].latitude],
                                visible: true,
                                extData:realData[i].storeID
                            });
                            marker.content = shopInfo + "<br>" + marker_title + formatNum(marker_val.toFixed(2)) + " 元";
                            marker.on('mouseover', markerMouseOver);
                            marker.on('click',function markerClick(e){
                                window.open("/shop_with_shopid?shopid="+e.target.F.extData);
                            });
                            //marker.emit('click', {target: marker});
                            marker.setMap(map);
                            var markerObj = {
                                status: 1,//图钉是否显示，1：显示，0，隐藏
                                marker: marker
                            }
                            mapMarker.push(markerObj);
                        }

                        function markerMouseOver(e) {
                            infoWindow.setContent("<div class='widget' " +
                                    "style='opacity: 0.86;background-color: #565656'>" +
                                    "<div class='widget-body'>" +
                                    "<p class='text-muted' style='color: white'>" + e.target.content + "</p>\n" +
                                    "</div></div>");
                            infoWindow.open(map, e.target.getPosition());
                        }
                    }else if(data.code=="fail"){
                        if(max_loop==0)
                            return;
                        generateHeatMap(index,search_city);
                    }
                    max_loop--;
                }
        );
    }


    /**
     * 除了当前被点击的元素之外，将某一系列的所有元素取消激活，并调用func所指定的方法
     * @param ele:被点击的按钮
     * @param allBtnEle:该元素下的所有按钮
     * @param func:需要调用的方法
     * */
    function clickButtonAndQuest(ele, allBtnEle, func) {
        var eleHtml = ele.html().replace(/\s+/g, "");
        //激活点击的按钮，取消激活其他按钮
        ele.addClass('button_active');
        allBtnEle.each(function () {
            if (!ele.is($(this))) {
                $(this).removeClass('button_active');
            }
        });
        //判断方法对应的参数
        if (eleHtml === '店铺数') {
            func(2);
        } else if (eleHtml === '销售额') {
            func(1);
        } else {
            func(0);
        }
    }

    widget1Btn.click(function () {
        clickButtonAndQuest($(this), widget1Btn, getSalesCharts);
    });

    widget2Btn.click(function () {
        clickButtonAndQuest($(this), widget2Btn, getPieCharts);
    });

    widget3Btn.click(function () {
        var ele = $(this);
        //激活点击的按钮，取消激活其他按钮
        ele.addClass('button_active');
        var eleHtml = ele.html().replace(/\s+/g, "");
        widget3Btn.each(function () {
            if (!ele.is($(this))) {
                $(this).removeClass('button_active');
            }
        });
        var city_name=$("#mapSearchInput").val();
        //判断方法对应的参数
        if (eleHtml === '客单价') {
            mapIndex = 2;
            generateHeatMap(mapIndex,city_name);
        } else if (eleHtml === '销售额') {
            mapIndex = 1;
            generateHeatMap(mapIndex,city_name);
        } else {
            mapIndex = 3;
            generateHeatMap(mapIndex,city_name);
        }
    });

    function getSalesCharts(index) {
        // console.log(MONTHLY_RESULT);
        myChart1 = echarts.init(document.getElementById("sales"));

        var baidu_array=MONTHLY_RESULT["BaiduWaiMai"];
        var eleme_array=MONTHLY_RESULT['ELeMe'];
        var meituan_array=MONTHLY_RESULT["MeiTuan"];

        var real_data=[];
        //筛选客单、销售、店铺
        var data_name;
        if (index == 0) {
            data_name="totTC";
        } else if (index == 1) {
            data_name="totSalesValue";
        } else {
            data_name="totStoreNo";
        }

        var meituan_list=[];
        var eleme_list=[];
        var baidu_list=[];
        var month_list=[];


        if(MONTHS>meituan_array.length){//如果超出数据范围
            MONTHS=meituan_array.length;
        }
        for (var i = 0; i <MONTHS; i++) {
            meituan_list[i]=(meituan_array[meituan_array.length-MONTHS+i][data_name]/10000.0).toFixed(decimals_num)
            eleme_list[i]=(eleme_array[eleme_array.length-MONTHS+i][data_name]/10000.0).toFixed(decimals_num);
            baidu_list[i]=(baidu_array[baidu_array.length-MONTHS+i][data_name]/10000.0).toFixed(decimals_num);
            month_list[i]=baidu_array[baidu_array.length-MONTHS+i]["yearMonth"].toString().substring(0, 4)
                    +"-"+baidu_array[baidu_array.length-MONTHS+i]["yearMonth"].toString().substring(4, 6);
        }

        var xName = "";
        if (index === 0) {
            xName = "客单数(万笔)";
        } else if (index === 1) {
            xName = "销售额(万元)";
        } else if (index === 2) {
            xName = "店铺数(家)";
        }

        var option = {
            color: ['#f9c851', '#188ae2','#ff5b5b'],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: PLATFORM,
                tooltip: {
                    //align: 'left',
                    show: true,
                    formatter: '点击可选择不同渠道'
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: month_list,
                name: "月份"
            },
            yAxis: {
                type: 'value',
                splitLine: false,
                name: xName
            },
            series: [
                {
                    name: '美团外卖',
                    type: 'line',
                    data: meituan_list,
                    lineStyle: {
                        width: 3
                    }
                },
                {
                    name: '饿了么',
                    type: 'line',
                    data: eleme_list,
                    lineStyle: {
                        width: 3
                    }
                },
                {
                    name: '百度外卖',
                    type: 'line',
                    data: baidu_list,
                    lineStyle: {
                        width: 3
                    }
                }
            ]
        };

        myChart1.clear();
        myChart1.setOption(option);
    }

    function getPieCharts(index) {
        myChart2 = echarts.init(document.getElementById("platform"));

        var real_data=[];
        var option;

        var name = "", s = "";
        if (index == 0) {
            name = "客单数占比";
            s = "笔";
        } else if (index == 1) {
            name = "销售额占比";
            s = "元";
        } else {
            name = "店铺数占比";
            s = "家";
        }

        if (index == 0) {
            name = "客单数占比";
            for (var i = 0; i <CHANNEL_PER_DATA.length ; i++) {
                var platform_en_name=CHANNEL_PER_DATA[i]["subSegment"];
                real_data[i]={value:CHANNEL_PER_DATA[i]["cityChannelTC"],name:PLATFORM_NAMES.get(platform_en_name)};
            }
        } else if (index == 1) {
            name = "销售额占比";
            for (var i = 0; i <CHANNEL_PER_DATA.length ; i++) {
                var platform_en_name=CHANNEL_PER_DATA[i]["subSegment"];
                var sale=CHANNEL_PER_DATA[i]["cityChannelGMV"].toFixed(decimals_num);
                real_data[i]={value:sale,name:PLATFORM_NAMES.get(platform_en_name)};
            }
        } else {
            name = "店铺数占比";
            for (var i = 0; i <CHANNEL_PER_DATA.length ; i++) {
                var platform_en_name=CHANNEL_PER_DATA[i]["subSegment"];
                var sale=CHANNEL_PER_DATA[i]["cityChannelStoreNo"];
                real_data[i]={value:sale,name:PLATFORM_NAMES.get(platform_en_name)};
            }
        }

        option = {
            color: ['#ff5b5b', '#188ae2', '#f9c851'],
            tooltip: {
                trigger: 'item',
                // formatter: "{a} <br/>{b} : {c} ({d}%)"
                formatter:function (data) {
                    var value=formatNum2(data.data.value);
                    var rst=data.seriesName+"<br/>  "+data.name+": "+value+" ("+data.percent+"%)"
                    return rst;
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['美团外卖', '饿了么', '百度外卖'],
                tooltip: {
                    //align: 'left',
                    show: true,
                    formatter: '点击可选择不同渠道'
                }
            },
            series: [
                {
                    name: name,
                    type: 'pie',
                    radius: '80%',
                    center: ['50%', '50%'],
                    data: real_data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                var realValue = fitNum((new Number(params.value)).toFixed(0));
                                return params.name + " : " + realValue + s+"\n"+"("+params.percent+"%)";
                            }
                        }
                    }
                }
            ]
        };

        myChart2.clear();
        myChart2.setOption(option);
    }

    $("td").css("vertical-align", "middle");


    //不同平台情况比较
    function initComparePlatFormTable(){
        $("#sales_promotion_info").empty()
        var brand= $("#sales_promotion_brand").val()
        var start_month=$("#start_month").val();
        var end_month=$("#end_month").val();
        var city_name=$("#city_name").val();
        if(brand==null||brand=="-1"){
            $("#sales_promotion_info").append("<tr><td colspan='2'>品牌下拉框未选择！！</td></tr>")
            return ;
        }
        //促销信息
        $.ajax({
            type: "GET",
            url: "/service/data/getPromotionInfobyCity?city=" + city_name + "&start_time=" + start_month+ "&end_time=" + end_month+"&brandName="+brand,
            async: false,
            success: function (res) {
                var dataPlat =[]
                if (res.code === "suc") {
                    try {
                        $('#compareplatformtable tbody').empty()
                        if(res.data.length>0){
                            // console.log(dataPlat);
                            dataPlat = res.data;
                            var html=""
                            for(var i in dataPlat){
                                var tr="<tr data-index=\""+i+"\"><td style=\"\">"+
                                        dataPlat[i]["promotioninfo"]+"</td></tr>"
                                html+=tr
                            }
                            $('#compareplatformtable tbody').append(html)
                            if(dataPlat.length<6){
                                $('#compareplatform').attr("style","")
                                $('#compareplatformtable').attr("style","")
                            }else{
                                $('#compareplatform').attr("style","overflow-y:scroll;height:265px")
                            }
                            $('#compareplatformtable tbody').css({
                                "text-align": "left"
                            })

                            //                        $('#compareplatformtable').bootstrapTable({
                            //                            cache: false,
                            //                            striped: false,
                            //                            sort:false,
                            //                            pagination: true,
                            //                            pageSize: 1,
                            //                            pageNumber:1,
                            //                            pageList: [10, 20, 50, 100, 200, 500],  sidePagination:'client',
                            //                            search: false,
                            //                            showColumns: false,
                            //                            showRefresh: false,
                            //                            showExport: false,
                            //                            search: false,
                            //                            clickToSelect: true,
                            //                            columns:
                            //                                    [
                            //                                        {field:"brand",title:"品牌",align:"center",valign:"middle",sortable:"true"},
                            //                                        {field:"prom",title:"促销",align:"center",valign:"middle",sortable:"true"},
                            //                                    ],
                            //                            data:[{"brand":"品牌111","prom":"促销111"},{"brand":"品牌222","prom":"促销221"}],
                            //                        });

                        }else{
                            $("#compareplatformtable tbody").append("<tr data-index='0'><td style=''>该时间段内没有数据！！</td></tr>")
                            return ;
                        }
                    } catch (e) {
                        // console.info(e);
                    }
                }else{
                    $("#compareplatformtable tbody").append("<tr data-index='0'><td style=''>发生异常！！</td></tr>")
                    return ;
                }
            }
        });

        //    $.ajax({
        //            type: "GET",
        //            url: "/service/data/get_overviewresult_by_cityChannel?city=" + city_name + "&start_time=" + start_month+ "&end_time=" + end_month,
        //            async: false,
        //            success: function (res) {
        //                var dataPlat =[]
        //                if (res.code === "suc") {
        //                    try {
        //                        $('#compareplatformtable').empty()
        //                        if(res.data.length>0){
        //                            // console.log(dataPlat);
        //                            dataPlat = res.data;
        //                            var html="<thead><tr>" +
        //                                    "<th style=\"\" data-field=\"channelName\"><div class=\"th-inner \">平台</div><div class=\"fht-cell\"></div></th>" +
        //                                    "<th style=\"\" data-field=\"channelGMV\"><div class=\"th-inner \">销售额(亿元)</div><div class=\"fht-cell\"></div></th>" +
        //                                    "<th style=\"\" data-field=\"channelTC\"><div class=\"th-inner \">客单数(万笔)</div><div class=\"fht-cell\"></div></th>" +
        //                                    "<th style=\"\" data-field=\"shopNumber\"><div class=\"th-inner \">店铺数(万家)</div><div class=\"fht-cell\"></div></th>" +
        //                                    "<th style=\"\" data-field=\"channelTA\"><div class=\"th-inner \">客单价(元)</div><div class=\"fht-cell\"></div></th></tr></thead>"
        //                            for(var i=0;i<dataPlat.length;i++){
        //                                var tr="<tr data-index=\""+i+"\"><td style=\"\">"+
        //                                   PLATFORM_NAMES.get(dataPlat[i].channelName)+"</td> <td style=\"\">"+
        //                                    dataPlat[i].channelGMV+"</td> <td style=\"\">"+
        //                                    dataPlat[i].channelTC+"</td> <td style=\"\">" +
        //                                    dataPlat[i].channelStoreNo+"</td> <td style=\"\">"+
        //                                    dataPlat[i].channelTA+"</td> </tr>"
        //                                html+=tr
        //                            }
        //                            $('#compareplatformtable').append(html)
        //                        }else{
        //                            initCityBrandNoData("该时间段内没有数据");
        //                        }
        //                    } catch (e) {
        //                        // console.info(e);
        //                    }
        //                }
        //            }
        //    });
    }

    function initCityBrandTable(){
        //品牌销售情况样式设置
        initTableStyleBrand()
        var brand=$("#mapSearchBrands").val()
        var cate=encodeURIComponent($("#mapSearchCategory").val())
        if(brand==null||cate==null||brand==-1||cate==-1){
            $("#topBrandTable").empty()
            initCityBrandNoData("品类或品牌下拉框未选择!")
            return;
        }
        var start_month = $("#start_month").val();
        var end_month = $("#end_month").val();
        var city_name = $("#city_name").val();
        if(start_month==''||end_month==''||city_name==''){
            $("#topBrandTable").empty()
            initCityBrandNoData("开始结束时间或者城市下拉框未选择!")
            return;
        }
        start_month=start_month.replace("-","")
        end_month=end_month.replace("-","")
        city_name=city_name.replace("-","")
        var brand=$("#mapSearchBrands").val()
        var cate=encodeURIComponent($("#mapSearchCategory").val())
        if(brand==null||cate==null||brand==-1||cate==-1){
            initCityBrandNoData("未选择品类或者品牌")
            return;
        }
        $.ajax({
            type: "GET",
            url: "/service/data/get_overviewresult_by_cityBrand?city=" + city_name + "&start_time=" + start_month+ "&end_time=" + end_month+"&subCategoryName="+cate+"&brandName="+brand,
            async: false,
            success: function (res) {
                var dataPlat =[]
                if (res.code === "suc") {
                    try {
                        $("#topBrandTable").empty()
                        //销毁表格，便于之后重新生成数据
                        $('#default-datatable').DataTable().destroy();
                        dataPlat = res.data;
                        var html="";
                        if(res.data.length>0){
                            for(var i=0;i<dataPlat.length;i++) {
                                var brand = dataPlat[i];
                                //var img_html = getBrandImg(brand["brandName"]);
                                html += "<tr>" +
                                        "<td style='color:#cf3138;font-weight:bold'>" + brand["brandName"] + "</td>" +//品类
                                        "<td>" + brand["brandStoreNo"] + "</td>" +//店铺数
                                        "<td>" + brand["brandTC"] + "</td>" +//客单数
                                        "<td>" + brand["brandTCCAGR"] + "</td>" +//客单数增长率
                                        "<td>" + brand["brandSalesValue"] + "</td>" +//销售额
                                        "<td>" + brand["storeTA"] + "</td>" +//店均客单价
                                        "<td>" + brand["brandTA"] + "</td>" +//客单价
                                        "<td></td>" +//折扣率
                                        "</tr>"
                            }
                            $("#topBrandTable").html(html);
                            var table = $('#default-datatable').DataTable({
                                //搜索框
                                "searching": false,
                                //是否排序
                                "bSort": true,
                                //是否显示每页显示数据大小
                                "bLengthChange": false,
                                //隐藏表格信息
                                "bInfo": false,

                                "aoColumnDefs": [{"bSortable": false, "aTargets": [0]}],

                                "aaSorting": [[1, "desc"]]

                            });

                            //只搜索第一列
                            $('#default-datatable_filter > label > input').on('keyup', function () {
                                table.columns(0).search(this.value).draw();
                            });
                            $('#topBrandTable tr.odd').css({
                                'background-color':'#fff3f5'
                            })
                            $('#default-datatable').on( 'order.dt',  function () {
                                $('.table-striped > tbody > tr').css({
                                    'background-color':'white'
                                });
                                $('.table-striped > tbody > tr:nth-of-type(odd)').css({
                                    'background-color':'#fff3f5'
                                });
                            })

                        }else{
                            initCityBrandNoData("该时间段内没有数据")
                        }
                    } catch (e) {
                        initCityBrandNoData("请求后台发生异常！")
                        console.info(e);
                    }
                }
            }
        });
    }

    function initCityBrandNoData(msg){
        $('#topBrandTable').empty()
        var tbody="<tr><td colspan='8'>"+msg+"</td></tr>"
        $('#topBrandTable').append(tbody)
    }

    function buildTable(city_name,start_month,end_month) {

        $.ajax({
            type: "GET",
            url: "/service/data/get_overviewresult_by_citySuCategory?city=" + city_name + "&start_time=" + start_month+ "&end_time=" + end_month,
            async: false,
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        //母表数据（ajax返回结果,需排序）
                        var rowData = res.data.cate;//格式：[['QSR','Total','1000','50'],[]]
                        //子表数据（ajax返回结果,需排序）
                        var subRowData = res.data.subCate
                        //1.表头数据
                        var titles = ['品类', '细分品类', '店铺数(家)', '客单数(万笔)', '客单数%', '客单数增长率%','客单数同比%','销售额(亿元)', '销售额占比%', '客单价（元）'];
                        var tooltip_title="点击查看过去十二个月的趋势"
                        $("#table_div").buildTables({
                            "titles":titles,
                            "rowData":rowData,
                            "subRowData":subRowData,
                            "sortTitle":"店铺数(家)",
                            "desc":1,
                            "tooltip":true,
                            "tooltip_title":tooltip_title
                        });

                    } catch (e) {
                        console.info(e);
                    }
                }
            }
        });
    }

    //设置表格的列 无边框initTableStyle
    function initTableStyleCategory(){
        $('#compareplatform1 thead').css({
            //"background":"#ba1b20",
            //"color":"#ffffff"
            "border-bottom": "3px solid #ba1b20"
        })
        $('#compareplatform1').css({
            "border-left":"none",
            "border-right":"none"
        });
        $('#compareplatform1 tr td').css({
            "border-left":"none",
            "border-right":"none"
        });
        $('#compareplatform1 tr th').css({
            "border-left":"none",
            "border-right":"none"
        });
    }
    //品牌销售情况   表格的列 无边框
    function initTableStyleBrand(){
        $('#default-datatable thead').css({
            //"background":"#ba1b20",
            //"color":"#ffffff"
            "border-bottom": "3px solid #ba1b20"
        })
        $('.table_overview thead').css({
            //"background":"#ba1b20",
            //"color":"#ffffff"
            "border-bottom": "3px solid #ba1b20"
        })
    }

    //点击查看过去十二个月的趋势
    function showLastData(cate) {
        var sub_title=cate.split("_")
        var city_name=$("#city_name").val();
        var mydate = '${yearMonth}'
        var url=""
        CATE_TYPE=sub_title[0];
        switch(sub_title[0]){
            case "1":
                url="/service/data/getOverviewResultTrendbyCitySection?city=" + city_name+"&end_time="+mydate
                        + "&section="+sub_title[1]
                break;
            case "2":
                url="/service/data/getOverviewResultTrendbyCityCategory?city=" + city_name+"&end_time="+mydate
                        + "&category="+sub_title[1]
                break;
            case "3":
                url="/service/data/getOverviewResultTrendbyCitySuCategory?city=" + city_name+"&end_time="+mydate
                        + "&suCategory="+sub_title[1]
                break;
        }
        $.ajax({
            type: "GET",
            url: url,
            async: false,
            success: function (res) {
                if (res.code === "suc") {
                    CATEGORY_TREND=res.data;
                }
            }
        });
        $('#myModalLabel').html(sub_title[1] + ' 过去12个月的趋势');
        $('#myModal').modal('show');
    }

    //模态框打开后再渲染
    $('#myModal').on('shown.bs.modal',function(){
        $("#selectCategory").val("0")
        getCategoryChart(0,CATE_TYPE);
    })


    function getCategoryChart(index,cate) {
        myChart3 = echarts.init(document.getElementById("category"));

        var cate_data=[];
        var month_list=[];

        var data_name;
        switch(cate){
            case "1":
                if (index == 0) {
                    data_name="sectionTC";
                } else if (index == 1) {
                    data_name="sectionSalesValue";
                } else if(index==2){
                    data_name="sectionStoreNo";
                } else {
                    data_name="sectionTA";
                }
                break;
            case "2":
                if (index == 0) {
                    data_name="categoryTC";
                } else if (index == 1) {
                    data_name="categorySalesValue";
                } else if(index==2){
                    data_name="categoryStoreNo";
                } else {
                    data_name="categoryTA";
                }
                break;
            case "3":
                if (index == 0) {
                    data_name="suCategoryTC";
                } else if (index == 1) {
                    data_name="subCategorySalesValue";
                } else if(index==2){
                    data_name="suCategoryStoreNo";
                } else {
                    data_name="suCategoryTA";
                }
                break;

        }

        for (var i = 0; i <CATEGORY_TREND.length; i++) {
            var val_unit;
            var data=new Number(CATEGORY_TREND[i][data_name]);
            if(index==0||index==2) {
                cate_data[i]=data.toFixed(0);
            }else{
                cate_data[i]=data.toFixed(2);
            }
            month_list[i]=CATEGORY_TREND[i]["yearMonth"].toString().substring(0, 4)
                    +"-"+CATEGORY_TREND[i]["yearMonth"].toString().substring(4, 6);
        }


        var xName = "";
        if (index == 0) {
            xName = "客单数(笔)";
        } else if (index == 1) {
            xName = "销售额(元)";
        } else if (index == 2) {
            xName = "店铺数(家)";
        } else {
            xName = "客单价(元)";
        }

        var option = {
            color: ['#ba1b20'],
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                x: 100
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: month_list,
                name: "月份"
            },
            yAxis: {
                type: 'value',
                splitLine: false,
                name: xName
            },
            series: [
                {
                    name: '数值',
                    type: 'line',
                    data: cate_data,
                    lineStyle: {
                        width: 3
                    }
                }
            ]
        };

        myChart3.clear();
        myChart3.setOption(option);

    }



    function getBrandImg(brand){
        var img_src=""
        switch (brand){
            case "肯德基":
                img_src="https://p1.meituan.net/waimaipoi/b19e9d2f6a71fbbe3574d59fad59cc3315082.jpeg@168w_126h_1e_1c"
                break;
            case "麦当劳":
                img_src="https://p0.meituan.net/waimaipoi/aa86bc1b9a218ea5e094b861c03b59b94873.jpg@168w_126h_1e_1c"
                break;
            case "华莱士":
                img_src="https://p1.meituan.net/waimaipoi/ff432a16c21ee28d8f7f4b98ed35ed1f9149.jpg@168w_126h_1e_1c"
                break;
            case "德克士":
                img_src="https://p0.meituan.net/waimaipoi/164f7baf5633038e3b81d72f287eaf685918.jpeg@168w_126h_1e_1c"
                break;
            default:
                img_src="http://p0.meituan.net/waimaipoi/dad8d2ecca79f36681ef8c964e76b37b174080.jpg.webp@168w_126h_1e_1c"
                break;
        }
        var html="<td align=\"center\" style=\"border-left:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;\">"+
                "<div class=\"avatar avatar-md avatar-circle dropdown\">"+
                "<img class=\"img-responsive\" src="+img_src+" alt=\"avatar\"></a>"+
                "</div>"+
                "</td>"
        return html;
    }


    function formatNum2(s) {
        var fu = false;
        if (!isNum(s)&&s.indexOf('-') >= 0) {
            fu = true;
            s = s.substring(1);
        } else {
            fu = false;
        }

        if (!isNum(s)) {
            s = 0;
        }

        s = new BigDecimal((s + "").replace(/[^\d\.-]/g, "")) + "";//更改这里n数也可确定要保留的小数位

        var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];

        t = "";

        if (!isNum(r)) {
            r = "0";
        } else if (r.length == 0) {
            r = "0";
        } else if (r.length == 1) {
            r = r
        }

        for (i = 0; i < l.length; i++) {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
        }
        if (fu) {
            if (r != "0") {
                return "-" + t.split("").reverse().join("") + "." + r;//保留2位小数  如果要改动 把substring 最后一位数改动就可
            } else {
                return "-" + t.split("").reverse().join("");
            }
        } else {
            if (r != "0") {
                return t.split("").reverse().join("") + "." + r;//保留2位小数  如果要改动 把substring 最后一位数改动就可
            } else {
                return t.split("").reverse().join("")
            }
        }

    }

</script>
<script type="text/javascript" src='../../res/assets/js/heatmap.js'></script>
<script type="text/javascript" src='../res/myassets/js/sorttable.js'></script>
<script>

    $(document).ready(function () {
        //echarts画出的是canvas，窗口变动后需要重绘
        window.onresize = function () {
            if (myChart1!=null)
                myChart1.resize();
            if (myChart2!=null)
                myChart2.resize();
            if (myChart3!=null)
                myChart3.resize();
        }
    });

</script>
</body>
</html>